<script lang="ts" setup>
import { ref, toRefs } from "vue";
import { onClickOutside } from "@vueuse/core";
import { ElLoading } from "element-plus";
import inputBoxComp from "./inputBox.vue";
import emojiContainer from "../suit/emojiContainer.vue";
import imageContainer from "../suit/imageContainer.vue";
import videoContainer from "../suit/videoContainer.vue";
import fileContainer from "../suit/fileContainer.vue";
import lingGongContainer from "../suit/lingGong.vue";
import imAddressContainer from "@/views/common/ImAddress.vue";
import imInviteContainer from "@/views/common/ImLongJobInterview.vue";
import quanZhiContainer from "../suit/quanZhi.vue";
import previewImgContainer from "../suit/previewImgContainer.vue";
import imCommonReply from "@/views/common/cmuse/index.vue";
import { ElMessage } from "element-plus";
//附件类上传加载状态
const loadingBox = ref<any>(null);
type ElLoading = /*unresolved*/ any;
let loadingInstance: ElLoading;
const onStartLoading = () => {
  if (loadingInstance) return;
  loadingInstance = ElLoading.service({
    target: loadingBox.value,
    background: "#f7f7f7"
  });
  return loadingInstance;
};
const onLoadending = () => {
  loadingInstance?.close();
  loadingInstance = null;
};
//表情
const emojiContainerComp = ref<any>(null);
onClickOutside(emojiContainerComp, () => {
  emojiContainerComp.value?.handleShowEmojisBox({ isShow: false });
});
const showEmojisBox = () => {
  emojiContainerComp.value?.handleShowEmojisBox({ isShow: true });
};
/* 文本相关操作 */
const textMessageComp = ref<any>(null);
const appendEmoji = emoji => {
  textMessageComp.value?.onAddOneEmoji(emoji);
};

/* 图片消息相关 */
//选择图片
const ImageMessageComp = ref<any>(null);
const chooseImages = () => {
  ImageMessageComp.value?.openChooseImages();
};
/* 视频消息 */
const videoMessageComp = ref<any>(null);
const chooseVideo = () => {
  videoMessageComp.value?.openChooseVideo();
};
//选择文件
const fileMessageComp = ref<any>(null);
const chooseFiles = () => {
  fileMessageComp.value?.openChooseFiles();
};
//选择零工岗位
const lingGongComp = ref<any>(null);
const chooseJobs = () => {
  lingGongComp.value?.chooseJob();
};
//全职岗位
const quanZhiComp = ref<any>(null);
const chooseJobs2 = () => {
  quanZhiComp.value?.chooseJob();
};
//位置发送
const imAddressComp = ref<any>(null);
const chooseAddress = () => {
  imAddressComp.value?.chooseAddress();
};
//发送面试
const imInviteComp = ref<any>(null);
const chooseInvite = row => {
  imInviteComp.value?.chooseInvite(row);
};
//常用语
const imCommonReplyComp = ref<any>(null);
const chooseICommonReply = () => {
  imCommonReplyComp.value?.chooseCommonMessage();
};
const noneOpe = () => {
  ElMessage.warning("开发中");
};
const props = defineProps({
  routeQueryData: {
    type: Object,
    required: false,
    default: () => ({
      id: ""
    })
  }
});

//贴图发送
const previewSendImg = ref<any>(null);
//从输入框剪切板获取图片
interface MyObject {
  kind: string;
  type: string;
  getAsFile(): Blob;
}
const getImageFileFromClipboard = (items: MyObject[]) => {
  const item = Array.from(items).find(item => item.kind === "file" && item.type.startsWith("image/"));
  if (item) {
    const file = item.getAsFile();
    const reader = new FileReader();
    reader.onload = event => {
      const base64String = event?.target?.result;
      // 你可以在这里处理base64String，比如显示图片或上传到服务器
      const imgInfo = {
        imgFile: file,
        tempFilePath: base64String
      };
      previewSendImg.value.showPreviewImgModal({ ...imgInfo });
    };
    reader.readAsDataURL(file);
    return; // 提前返回，因为读取是异步的
  }
};

const all_func = [
  {
    className: "icon-icon_emoji",
    style: "font-size:20px;margin-left: 20px;",
    title: "选择表情",
    methodName: showEmojisBox
  },
  {
    className: "icon-tuku",
    style: "font-size: 26px;",
    title: "发送图片",
    methodName: chooseImages
  },
  {
    className: "icon-shipin",
    style: "font-size: 20px;",
    title: "发送视频",
    methodName: chooseVideo
  },
  {
    className: "icon-wenjian",
    style: "font-size: 20px;",
    title: "发送文件",
    methodName: chooseFiles
  },
  {
    className: "icon-linggong",
    style: "font-size: 20px;",
    title: "零工岗位",
    methodName: chooseJobs
  },
  {
    className: "icon-quanzhi",
    style: "font-size: 20px;",
    title: "全职岗位",
    methodName: chooseJobs2
  },
  {
    className: "icon-location",
    style: "font-size: 20px;",
    title: "发送位置",
    methodName: chooseAddress
  },
  {
    className: "icon-mianshi",
    style: "font-size: 20px;",
    title: "快捷回复",
    methodName: chooseICommonReply
  }
];
// ,
//   {
//     className: "icon-peixun",
//     style: "font-size: 20px;",
//     title: "培训考证",
//     methodName: noneOpe
//   },
//   {
//     className: "icon-mianshi",
//     style: "font-size: 20px;",
//     title: "面试邀请",
//     methodName: noneOpe
//   },
//   {
//     className: "icon-yijia",
//     style: "font-size: 20px;",
//     title: "议价",
//     methodName: noneOpe
//   }
const { routeQueryData } = toRefs(props);
</script>

<template>
  <div class="chat_func_box">
    {{ routeQueryData.id }}
    <span
      v-for="iconItem in all_func"
      :class="['iconfont', iconItem.className]"
      :key="iconItem.className"
      :style="iconItem.style"
      :title="iconItem.title"
      @click.stop="iconItem.methodName"
    ></span>
  </div>
  <!-- 表情 -->
  <emojiContainer ref="emojiContainerComp" @append-emoji="appendEmoji"></emojiContainer>
  <!-- 图片 -->
  <imageContainer
    ref="ImageMessageComp"
    :target-id="routeQueryData.id"
    :chat-type="routeQueryData.chatType"
    @on-start-loading="onStartLoading"
    @on-loadending="onLoadending"
  />
  <!-- 视频 -->
  <videoContainer
    ref="videoMessageComp"
    :target-id="routeQueryData.id"
    :chat-type="routeQueryData.chatType"
    @on-start-loading="onStartLoading"
    @on-loadending="onLoadending"
  />
  <!-- 文件 -->
  <fileContainer
    ref="fileMessageComp"
    :target-id="routeQueryData.id"
    :chat-type="routeQueryData.chatType"
    @on-start-loading="onStartLoading"
    @on-loadending="onLoadending"
  />
  <!-- 零工 -->
  <lingGongContainer ref="lingGongComp"></lingGongContainer>
  <!-- 全职 -->
  <quanZhiContainer ref="quanZhiComp" @doInvite="chooseInvite"></quanZhiContainer>
  <!-- 位置 -->
  <imAddressContainer ref="imAddressComp"></imAddressContainer>
  <!-- 职位邀请 -->
  <imInviteContainer ref="imInviteComp"></imInviteContainer>
  <!-- 常用语 -->
  <imCommonReply ref="imCommonReplyComp"></imCommonReply>
  <!-- 图片粘贴 -->
  <previewImgContainer
    ref="previewSendImg"
    :target-id="routeQueryData.id"
    :chat-type="routeQueryData.chatType"
    @on-start-loading="onStartLoading"
    @on-loadending="onLoadending"
  />
  <inputBoxComp
    ref="textMessageComp"
    :target-id="routeQueryData.id"
    :chat-type="routeQueryData.chatType"
    @get-image-file-from-clipboard="getImageFileFromClipboard"
  ></inputBoxComp>
</template>

<style lang="scss" scoped>
.chat_func_box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 42px;
  line-height: 12px;
  background-color: #f7f7f7;
  border-top: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  .icon-icon_emoji {
    &::before {
      background-image: url(http://qwzls.oss-cn-hangzhou.aliyuncs.com/recruit/static/pc/icon/IM1.png);
    }
  }
  .icon-tuku {
    &::before {
      background-image: url(http://qwzls.oss-cn-hangzhou.aliyuncs.com/recruit/static/pc/icon/IM2.png);
    }
  }
  .icon-shipin {
    &::before {
      background-image: url(http://qwzls.oss-cn-hangzhou.aliyuncs.com/recruit/static/pc/icon/IM3.png);
    }
  }
  .icon-wenjian {
    &::before {
      background-image: url(http://qwzls.oss-cn-hangzhou.aliyuncs.com/recruit/static/pc/icon/IM4.png);
    }
  }
  .icon-linggong {
    &::before {
      background-image: url(http://qwzls.oss-cn-hangzhou.aliyuncs.com/recruit/static/pc/icon/IM5.png);
    }
  }
  .icon-quanzhi {
    &::before {
      background-image: url(http://qwzls.oss-cn-hangzhou.aliyuncs.com/recruit/static/pc/icon/IM6.png);
    }
  }
  .icon-mianshi {
    &::before {
      background-image: url(http://qwzls.oss-cn-hangzhou.aliyuncs.com/recruit/static/pc/icon/IM7.png);
    }
  }
  .icon-peixun {
    &::before {
      background-image: url(http://qwzls.oss-cn-hangzhou.aliyuncs.com/recruit/static/pc/icon/IM8.png);
    }
  }
  .icon-yijia {
    &::before {
      background-image: url(http://qwzls.oss-cn-hangzhou.aliyuncs.com/recruit/static/pc/icon/IM9.png);
    }
  }
  .icon-location {
    &::before {
      background-image: url(http://qwzls.oss-cn-hangzhou.aliyuncs.com/recruit/static/pc/icon/IM10.png);
    }
  }
  .chat_func_icon {
    width: 25px;
    height: 25px;
  }
  .emojis_box {
    position: absolute;
    top: -180px;
    left: 15px;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    width: 330px;
    height: 150px;
    padding: 15px 5px;
    background: #ffffff;
    border-radius: 5px;
    .emoji {
      display: inline-block;
      width: 25px;
      height: 25px;
      line-height: 25px;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s ease;
      &:hover {
        transform: scale(1.2);
      }
    }
  }
  .loading_box {
    position: absolute;
    top: 0;
    right: 5px;
    width: 50px;
    height: 100%;
    font-size: 15px;
  }
}

/* loading svg大小调整 */
:deep(.circular) {
  width: 25px;
  height: 25px;
  margin-top: 8px;
}
.iconfont {
  margin-right: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  &::before {
    content: " ";
    width: 20px;
    height: 21px;
    display: inline-block;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  &:hover {
    color: #1b83f9;
    transform: scale(1.2);
  }
}
.record_box {
  width: 250px;
  height: 180px;
}
</style>
